<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>alikorol首页</title>
		<link rel="stylesheet" href="__PUBLIC__/static/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="__PUBLIC__/static/fullPage/css/jquery.fullPage.css">
		<link rel="stylesheet" href="__PUBLIC__/template/css/common.css">
		<link rel="stylesheet" href="__PUBLIC__/template/css/base.css">
		<link rel="stylesheet" href="__PUBLIC__/template/css/hover.css">
		<link rel="stylesheet" href="__PUBLIC__/template/css/index.css">
	</head>
	<body>
		<div class="pageControl index">
			<div class="msui_navTop">
				<div class="msui_cell msui_navTop-contain">
					<div class="msui_navTop-logo">
						<P>asdasd</P>
					</div>
					<div class="msui_navTop-tab">
						<a class="cssBtn btn-1 btn-1a micon-homepage">
							<span>主页</span>
						</a>
						<a class="cssBtn btn-1 btn-1a micon-blog"><span>博客</span></a>
						<a class="cssBtn btn-1 btn-1a micon-others"><span>其他</span></a>
					</div>
					<div class="msui_navTop-login">
						<span>注册</span>/
						<span>登录</span>
					</div>
				</div>
			</div>
			<!--<div class="msui_cell msui_navBottom">
				<p>created by korol---Github:799834285@qq.com</p>
			</div>-->
			<div id="fullPage">
				<div class="section section1">
					<div class="botButton">
						<a href="#page2"></a>
					</div>
				</div>
				<div class="section section2">
					<div class="msui_flex header">
						<div class="msui_item headerTitle js-header">
							<span>About Me</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="msui_flex subtitle">
						<div class="msui_item">
							<p>纸上得来终觉浅...</p>
						</div>
					</div>
					<ul class="msui_flex showList">
						<li  class="msui_flex msui_item js-list1">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
						<li  class="msui_flex msui_item js-list2">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
						<li  class="msui_flex msui_item js-list3">
							<a class="msui_item">
								<img src="static/images/1.jpg">
								<span>123</span>
							</a>
						</li>
					</ul>
					<div class="botButton">
						<a href="#page3"></a>
					</div>
				</div>
				<div class="section section3">
					<div class="msui_flex header">
						<div class="msui_item headerTitle js-header">
							<span>Growing</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="botButton">
						<a href="#page4"></a>
					</div>
				</div>
				<div class="section section4">
					<div class="msui_flex header">
						<div class="msui_item headerTitle js-header">
							<span>Message</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
					<div class="botButton">
						<a href="#page5"></a>
					</div>
				</div>
				<div class="section section5">
					<div class="msui_flex header">
						<div class="msui_item headerTitle js-header">
							<span>Contract Me</span>
						</div>
						<div class="msui_item headerBaseline"></div>
					</div>
				</div>
			</div>
		</div>
	<script src="__PUBLIC__/static/jquery-1.10.2.min.js"></script>
	<script src="__PUBLIC__/static/fullPage/js/jquery.fullPage.min.js"></script>
	<script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
	<script src="__PUBLIC__/template/js/index.js"></script>
	<script>
		$(function(){
			$('#fullPage').fullpage({
				'verticalCentered':false,
				'navigation': true,
				'navigationPosition': 'right',
        		'navigationTooltips': ['首页', '关于我', '历程', '动态','联系'],
        		'anchors': ['page1', 'page2', 'page3', 'page4','page5'],
        		afterLoad: function(anchorLink, index){
					if(index == 2){
						$('.section2 .js-header span').delay(100).addClass('headerAnimate');
						$('.section2 .js-list1').find('a').delay(100).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list1').find('a').delay(100).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list2').find('a').delay(300).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .js-list3').find('a').delay(500).animate({
							top: '0'
						}, 1000, 'easeOutExpo');
						$('.section2 .subtitle p').delay(1000).animate({
							left: '0'
						}, 1500, 'easeOutExpo');
					}
					if(index == 3){
						$('.section3 .js-header span').delay(100).addClass('headerAnimate');
					}
					if(index == 4){
						$('.section4 .js-header span').delay(100).addClass('headerAnimate');
					}
					if(index == 5){
						$('.section5 .js-header span').delay(100).addClass('headerAnimate');
					}
				},
				onLeave: function(index, direction){
					if(index == '2'){
						$('.section2 .js-header span').delay(100).removeClass('headerAnimate');
						$('.section2 .js-list1').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .js-list2').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .js-list3').find('a').animate({
							top: '-250px'
						}, 100, 'easeOutExpo');
						$('.section2 .subtitle p').delay(1000).animate({
							left: '-120%'
						}, 1500, 'easeOutExpo');
					}
					if(index == 3){
						$('.section3 .js-header span').delay(100).removeClass('headerAnimate');
					}
					if(index == 4){
						$('.section4 .js-header span').delay(100).removeClass('headerAnimate');
					}
					if(index == 5){
						$('.section5 .js-header span').delay(100).removeClass('headerAnimate');
					}
					
				}
			});
		});

		
	</script>
	</body>
</html>
